/*
* Created by: liyongxuan
* Description: 基金管理--拟设立基金--基金基金注册>备注信息详情
*/
<template>
    <div class="ca-box headTitle ca-m-t-20">
        <!--基金注册>备注信息头部-->
        <div>
            <el-row class="ca-m-b-20">
                <el-col :span="2" class="ca-title">
                    <h3>备注信息</h3>
                </el-col>
                <el-col :span="10" class="ca-pull-right ca-align-right">
                    <el-button type="primary" @click="addDialog = true" :disabled="!isAuthPartnerEdit">添加</el-button>
                </el-col>
            </el-row>
        </div>
        <!--基金注册>备注信息详情-->
        <div>
            <el-form label-width="90px" label-position="right">
                <el-row v-if="!remarkInfo.length" class="ca-data-font">暂无数据</el-row>
                <el-row
                    v-if="remarkInfo.length"
                    v-for="(item, index) in remarkInfo"
                    :key="index"
                    class="ca-m-t-10 ca-m-b-20 ca-box">
                    <div v-if="!item.isEdit">
                        <el-row class="ca-partner-padding ca-partner-title">
                            <el-col :span="6">
                                <span>标题：{{item.title}}</span>
                            </el-col>
                            <el-col :span="6">
                                <span>记录人：{{item.recordUser}}</span>
                            </el-col>
                            <el-col :span="4">
                                <span>时间：{{$moment(item.createTime).format("YYYY-MM-DD")}}</span>
                            </el-col>
                            <el-col :span="4">
                                <span>记录时间：{{$moment(item.recordTime).format("YYYY-MM-DD")}}</span>
                            </el-col>
                            <el-col :span="1">
                                <i v-if="item.detailShow" class="el-icon-caret-bottom icon" @click="showDetail(item,index)"></i>
                                <i v-else class="el-icon-caret-top icon" @click="showDetail(item,index)"></i>
                            </el-col>
                            <el-col :span="2" class="ca-align-right">
                                <el-button type="text" class="ca-edit-btn el-icon-edit padding0" @click="changeEdit(item,index)" :disabled="!isAuthPartnerEdit">编辑</el-button>
                            </el-col>
                        </el-row>
                        <hr v-show="!item.detailShow" class="border-bottom"/>
                        <el-row v-show="!item.detailShow" class="ca-partner-padding ca-partner-title">
                            <h3>内容：</h3>
                            <span style="word-break: break-all">{{item.content}}</span>
                        </el-row>
                        <el-row v-show="!item.detailShow" class="ca-partner-padding ca-partner-title">
                            <h3>文件记录：</h3>
                            <div class="ca-file-ul">
                                <el-row class="ca-file-row" v-for="(file, detailIndex) in item.filesList" :key="detailIndex">
                                    <!-- <el-col :span="5">
                                        <div class="ca-text-over-flow-ellipsis">{{file.fileType|getNameByType}}</div>
                                    </el-col> -->
                                    <el-col :span="1">
                                        <tz-icon-file-type class="ca-m-r-5" :fileType="file.fileName"></tz-icon-file-type>
                                    </el-col>
                                    <el-col :span="15">
                                        <div class="ca-text-over-flow-ellipsis ca-pointer"
                                             @click="previewFileCheck(file.id, file.fileName)">
                                            <span class="ca-font-size-16 ca-pointer">{{file.fileName}}</span>
                                        </div>
                                    </el-col>
                                    <el-col :span="3" class="ca-pull-right ca-align-right">
                                        <a class="ca-download ca-m-r-10" @click="downloadFile(file.id)"></a>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    </div>
                    <div v-else>
                        <el-row class="ca-leng-30 ca-m-t-20">
                            <el-col :span="8">
                                <el-form-item label="标题" label-width="60px">
                                    <el-input v-model="item.title" :maxlength="100" placeholder="不超过100字" style="width:100%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="时间">
                                    <el-date-picker v-model="item.recordTime" type="date" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="2">
                                <el-button type="danger" size="medium" @click="delRemarkInfoItem(item, index)">删除</el-button>
                                <el-button type="primary" size="medium" @click="editRemarkInfoSave(item, index)">保存</el-button>
                                <el-button size="medium" @click="close(item,index)">取消</el-button>
                            </el-col>
                        </el-row>
                        <hr class="border-bottom"/>                        
                        <el-row class="ca-partner-padding ca-partner-title">
                            <h3>内容：</h3>
                            <el-input :maxlength="3000" placeholder="不超过3000字" :rows="3" type="textarea" v-model="item.content"></el-input>
                        </el-row>
                        <el-row class="ca-partner-padding ca-partner-title">
                            <h3 class="ca-m-b-10">文档记录：
                                <div class="ca-inline-block ca-m-r-10 ">
                                    <csUpload
                                        :fileType="fileType"
                                        :businessId="item.id"
                                        :isShowFileChildType="false"
                                        uploadType="all"
                                        :getFileUploadedReturnData="getFileListMod"                                        
                                    ></csUpload>
                                </div>
                            </h3>
                            <div class="ca-file-ul">
                                <el-row class="ca-file-row" v-for="(file, editIndex) in editFilesList" :key="editIndex">
                                    <el-col :span="5">
                                        <div class="ca-text-over-flow-ellipsis">{{file.fileType | getNameByType  }}</div>
                                    </el-col>
                                    <el-col :span="1">
                                        <tz-icon-file-type class="ca-m-r-5" :fileType="file.fileName"></tz-icon-file-type>
                                    </el-col>
                                    <el-col :span="15">
                                        <div class="ca-text-over-flow-ellipsis ca-pointer"
                                             @click="previewFileCheck(file.id, file.fileName)">
                                            <span class="ca-font-size-16 ca-pointer">{{file.fileName}}</span>
                                        </div>
                                    </el-col>
                                    <el-col :span="3" class="ca-pull-right ca-align-right">
                                        <a class="ca-download ca-m-r-10" @click="downloadFile(file.id)"></a>
                                        <el-button class="ca-table-btn" @click="deleteFile(file.id,editIndex)">
                                            <i class="fa fa-times"></i>
                                        </el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    </div>
                </el-row>
            </el-form>
        </div>
        <csAddPartner
            :addDialog="addDialog"
            :remarkInfoEntity="remarkInfoEntity"
            :fileDetail="fileDetail"
            @cancelDialog="cancelDialog"
            @addRemarkInfo="addRemarkInfo"
            @deleteFileItem="deleteFileItem"
            @getFileUploadedReturnDataFun="getFileUploadedReturnDataFun"
        ></csAddPartner>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import mined from '__components/file-list/mixin';
    import { isNoAuth } from '__service/utils';
    export default {
        mixins: [mined],
        data() {
            return {
                isAuthEdit: false,
                remarkInfo: [],// 基金注册>备注信息
                guest: this.$store.state.user.guest,
                addDialog: false,// 添加弹框开关
                fileList: [],
                fileDetail: [],
                editFilesList: [],//编辑上传文件返回的数据
                remarkInfoEntity: {
                    'content': '',
                    'filesList': [],
                    'fundId': this.$route.params.itemId,
                    'id': '',
                    'recordTime': '',
                    'recordUser': this.$store.state.user.cnName,
                    'title': ''
                },
                fileType: this.$store.state.user.fileFloderDicVoList[48].type,// 基金文件类型
                isEditList: [],// 编辑列表
                isAuthPartnerEdit: isNoAuth('拟投资基金-基金注册-编辑'),
            }
        },
        props: {
            itemId: {
                type: String,
                default: function () {
                    return ''
                }
            },
            tabIndex: {
                type: Number,
                default: function () {
                    return null
                }
            },
        },
        watch: {
        },
        mounted() {
            isNoAuth('')
            this.getRemarkInfoList();
        },
        methods: {
            // 展开详情
            showDetail(item,index) {
                item.detailShow = !item.detailShow
                this.$set(this.remarkInfo,index,item)
            },
            // 进入单个编辑页
            changeEdit(item,index) {
                item.isEdit = !item.isEdit;
                this.editFilesList = item.filesList
                this.$set(this.remarkInfo,index,item)
            },
            // 文件成功返回的数据
            getFileUploadedReturnDataFun(data) {
                let fileItem = data.map(item=>{
                    return item.id;
                })
                this.remarkInfoEntity.filesList = this.remarkInfoEntity.filesList.concat(fileItem)
                this.fileDetail = this.fileDetail.concat(data)
            },
            // 编辑上传文件
            getFileListMod(data) {
                data.map(item=>{
                    this.editFilesList.push(item)
                })
            },
            // 编辑删除文件
            deleteFile(id,editIndex) {
                this.$confirm('确认删除此文件?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let resData = await apiHttp(api.DELETE_FILE, {id: id});
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({type: 'success',message: '删除成功!'});
                        this.editFilesList.splice(editIndex, 1);
                        this.$emit('addRedDot', this.tabIndex);
                    }
                })
            },
            // 获取基金注册>备注信息列表
            async getRemarkInfoList() {
                let {resCode, data} = await apiHttp(api.LIST_FUND_CLAUS, {fundId: this.itemId});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.remarkInfo = data;
                    this.remarkInfo.map(item=>{
                        item.isEdit = false
                        item.detailShow = true
                    })
                }
            },
            // 获取基金注册>备注信息详情
            async getRemarkInfoDetail(item, index, val) {
                let {resCode, data} = await apiHttp(api.GET_FUND_CLAUS, {id: item.id});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    let newRemarkInfo = {
                        ...data,
                        isEdit: val,
                        detailShow: val
                    }
                    this.remarkInfo.splice(index, 1, newRemarkInfo)
                }
            },
            // 添加基金注册>备注信息
            async addRemarkInfo() {
                let {resCode} = await apiHttp(api.ADD_FUND_CLAUS, {...this.remarkInfoEntity});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.$message({
                        type: 'success',
                        message: '添加成功！',
                        center: true
                    })
                    this.$emit('addRedDot', this.tabIndex);
                    this.cancelDialog();
                    this.getRemarkInfoList();
                    // this.fileList = [];
                }
            },
            // 删除基金注册>备注信息
            async delRemarkInfoItem(item, index) {
                this.$confirm('确认删除此文件?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async()=>{
                    let {resCode} = await apiHttp(api.DEL_FUND_CLAUS, {id: item.id});
                    if (resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({type: 'success',message: '删除成功！'})
                        this.$emit('addRedDot', this.tabIndex);
                        this.remarkInfo.splice(index, 1)
                    }
                })
            },
            // 关闭编辑
            async close(item,index) {
                this.getRemarkInfoDetail(item, index, false)
            },
            // 修改基金注册>备注信息
            async editRemarkInfoSave(item, index) {
                item.filesList = this.editFilesList.map(u => u.id)
                delete item.isEdit
                delete item.detailShow
                const {resCode} = await apiHttp(api.PUT_FUND_CLAUS, item);
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.$message({type: 'success',message: '修改成功！'})
                    this.editFilesList = []//清空暂存
                    this.$emit('addRedDot', this.tabIndex);
                    this.getRemarkInfoDetail(item, index, false);
                }
            },
            // 删除添加弹出框的文件
            deleteFileItem(index) {
                this.remarkInfoEntity.filesList.splice(index, 1);
                this.fileDetail.splice(index, 1);
            },
            // 清空弹框
            cancelDialog() {
                this.addDialog = false;
                this.remarkInfoEntity = {
                    'content': '',
                    'filesList': [],
                    'fundId': this.itemId,
                    'id': '',
                    'recordTime': '',
                    'recordUser': this.$store.state.user.cnName,
                    'title': ''
                }
                this.fileDetail = [];
            }
        },
        components: {
            'csUpload': require('__components/upload-btn/index'),//上传文件组件
            'csAddPartner': require('./add'),//上传文件组件
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .headTitle{
        font-size:16px;
        padding: 20px;
    }
    .ca-partner-title{
        h3 {
            font-weight:normal;
            font-size: 18px;
            line-height: 40px;
        }
        span {
            font-size: 14px;
        }
    }
    .ca-file-ul {
        margin-top: 0;
    }
    .ca-data-font {
        color: #999;
        margin-bottom: 20px;
    }
    .ca-partner-padding {
        padding: 20px 20px;
    }
    .border-bottom{
        color: #dbe3ea;
        width: 96%;
        margin: 0 0 0 2%
    }
    .icon{
        font-size: 36px;
        line-height: 0.5
    }
    .padding0{
        padding: 0
    }
</style>
